import React from "react";
// import BaseScreen from "../../BaseScreen";
// import ProgressView from "../../../view/ProgressView";
import { Actions, NameSpace } from "../../../model/taskModel";
import { connect } from "react-redux";
import styles from "../../../css/attendance.module.css";
import { locationTo, } from "../../../utils/LocationUtil";
import * as locations from '../../../const/locations'
// import { MyButton } from "../../../view/MyButton";
import Config from "../../../Config";
import { getTOKEN } from "../../../utils/StorageUtil";
import PunchItem2 from './punchItem'
import { Weipaibanci } from '../Default'
import { preDoCard } from '../../../service/AttendService'
class Punch extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      preCard: {}, // 预打卡信息
      default_des: null
    }
  }
  componentWillReceiveProps() {
    this.preCard()


  }
  preCard = () => {
    this.props.setLoading(true)
    preDoCard({
      token: getTOKEN()
    })
      .then(
        res => {
          this.props.setLoading(false)
          if (res.error_code === 300) {
            this.setState({
              preCard: null,
              default_des: '今天休息呦'
            })
          } else if (
            res.error_code === 0 &&
            res.data
          ) {
            const preCard = res.data
            const str = preCard.cn_type_name.split("_")

            preCard.work_time = getTime(preCard.need_card_time)


            preCard.result_type = preCard.result_code
            preCard.isCard = true
            preCard.type = str[0]
            this.setState({
              preCard: preCard
            })
          } else {
            this.setState({
              preCard: null
            })
          }
        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  componentDidMount() {
    this.getSelectedDate()
  }
  // 选择日期
  getSelectedDate = () => {
    this.setState({
      selectDate: this.props.selectDate
    })
  }
  // 申请
  navigate = ({ work_time, cn_type }) => {

    const { year, month, showDate, record } = this.props.selectDate
    this.props.setInfo({
      year: year,
      month: month,
      date: showDate,
      time: work_time,
      id: record.id,
      cn_type: cn_type
    })
    locationTo(locations.RECARD)
  }
  render() {
    const { preCard } = this.state
    const { record,
       classInfo,
        isPreCard, //是否今天
        default_des 
      } = this.props.selectDate
   
    return (
      <div className={styles['attend_item_w']}>
        {record === null && ((isPreCard === false) || (isPreCard === true && preCard === null)) && <Weipaibanci des={default_des} />}
        {(isPreCard && record === null && preCard !== null) &&
          <div className={styles['punch_wrapper']}>
            <div className={styles['line']}></div>
            {preCard && !record &&
              <PunchItem
                type={preCard.type}
                index={0}
                classInfo={classInfo}
                record={preCard}
                reload={this.props.reload}
                navigate={this.navigate}
                setLoading={this.props.setLoading}
                isPreCard={isPreCard}
                preCard={preCard}
              />}
          </div>}
        {record && <div className={styles['punch_wrapper']}>
          <div className={styles['line']}></div>
          {((record.start_1 && preCard && record.start_1.cn_type < preCard.cn_type) || !isPreCard || !preCard) &&
            <PunchItem
              type={'start'}
              index={0}
              classInfo={classInfo}
              record={record.start_1}
              reload={this.props.reload}
              navigate={this.navigate}
              setLoading={this.props.setLoading}
              isPreCard={isPreCard}
              preCard={preCard}
            />
          }
          {((record.start_1 && preCard && record.start_1.cn_type === preCard.cn_type) && isPreCard) &&
            <PunchItem
              type={preCard.type}
              index={0}
              classInfo={classInfo}
              record={preCard}
              reload={this.props.reload}
              navigate={this.navigate}
              setLoading={this.props.setLoading}
              isPreCard={isPreCard}
              preCard={preCard}
            />

          }
          {((record.off_1 && preCard && record.off_1.cn_type < preCard.cn_type) || !isPreCard || !preCard) &&
            <PunchItem
              type={'off'}
              index={1}
              classInfo={classInfo}
              record={record.off_1}
              reload={this.props.reload}
              navigate={this.navigate}
              setLoading={this.props.setLoading}
              isPreCard={isPreCard}
              preCard={preCard}
            />
          }
          {((record.off_1 && preCard && record.off_1.cn_type === preCard.cn_type) && isPreCard) &&
            <PunchItem
              type={preCard.type}
              index={1}
              classInfo={classInfo}
              record={preCard}
              reload={this.props.reload}
              navigate={this.navigate}
              setLoading={this.props.setLoading}
              isPreCard={isPreCard}
              preCard={preCard}
            />
          }
        </div>}
      </div>
    )
  }
}

class PunchItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      HEIGHT: 0
    }
    this.isDidStatus = false
  }
  componentDidMount() {
    this.isDidStatus = true
    this.setState({
      HEIGHT: this.refs['punch_item'].offsetHeight
    })
  }
  render() {
    const {
      type,
      index,
      classInfo,
      record,
      reload,
      navigate,
      setLoading,
      isCard,
      isPreCard,
      preCard
    } = this.props
    return (
      <div className={styles['punch_item']} ref='punch_item'>
        <div className={styles['line_wrapper']} style={{ height: this.state.HEIGHT + 'px' }}>
          <div className={styles['line_top']} style={{ opacity: index === 0 ? '1' : '0' }}>
          </div>
          <div className={styles['line_bottom']} style={{ height: (this.state.HEIGHT - 20) + 'px' }}>
          </div>
        </div>
        <div className={styles['punch_item_content']}>
          <div className={styles['office_time']}>
            <div
              className={styles['punch_disc']}
              style={{ background: Config.BaseColor }}
            >
            </div>
            {type === 'start' ? '上班' : '下班'}时间 {record.work_time}
          </div>
          {
            ((isPreCard === true && preCard && preCard.cn_type > record.cn_type) || !preCard || isPreCard === false) &&
            <div className={styles['punch_time']}>
              {record.card_time !== '00:00:00' &&
                <div className={styles['punch_time_str']}>
                  打卡时间 {record.card_time}
                </div>
              }
              {(parseInt(record.result_type, 10) === 3) &&
                <div className={styles['punch_time_str']}>
                  未打卡
              </div>
              }
              {(parseInt(record.result_type, 10) === 0) &&
                <div className={styles['punch_time_str']}>
                  {type === 'start' && ' 未打卡'}
                  {isPreCard === true && type === 'off' && '未到打卡时间'}
                  {isPreCard === false && type === 'off' && '未打卡'}
                </div>
              }
              {parseInt(record.outside_card, 10) === 1 && <Label name='外勤' color='#5297ff' />}
              {parseInt(record.result_type, 10) === 1 && <Label name='正常' color='#5297ff' />}
              {parseInt(record.result_type, 10) === 6 && <Label name='迟到' color='#ffc72a' />}
              {parseInt(record.result_type, 10) === 7 && <Label name='请假' color='#ffc72a' />}
              {parseInt(record.result_type, 10) === 5 && <Label name='早退' color='#ffc72a' />}
              {parseInt(record.result_type, 10) === 8 && <Label name='旷工' color='#ff0000' />}
              {parseInt(record.result_type, 10) === 3 && <Label name='缺卡' color='#ff0000' />}
              {parseInt(record.result_type, 10) === 4 && <Label name='补卡' color='#00ff00' />}
              {parseInt(record.result_type, 10) === 2 && <Label name='外勤' color='rgb(204, 121, 237)' />}
            </div>
          }
            
          {((!isPreCard || ((preCard && preCard.cn_type > record.cn_type) || !preCard)) &&
            record.result_type !== undefined &&
            parseInt(record.result_type, 10) !== 0 &&
            parseInt(record.result_type, 10) !== 1 &&
            parseInt(record.result_type, 10) !== 4 &&
            parseInt(record.result_type, 10) !== 7 &&
            (!record.apply_status || parseInt(record.apply_status) === 3)) &&
            <div className={styles['punch_to_apply']} onClick={() => navigate(record)}>
              提交申请
            </div>
          }
          {((!isPreCard || ((preCard && preCard.cn_type > record.cn_type) || !preCard)) &&
            record.result_type !== undefined &&
            parseInt(record.result_type, 10) !== 0 &&
            parseInt(record.result_type, 10) !== 1 &&
            parseInt(record.result_type, 10) !== 4 &&
            parseInt(record.result_type, 10) !== 7 &&
            (record.apply_status && parseInt(record.apply_status, 10) === 2)) &&
            <div className={styles['punch_to_apply']}>
              申请中
          </div>
          }
          {((!isPreCard || ((preCard && preCard.cn_type > record.cn_type) || !preCard)) &&
            record.result_type !== undefined &&
            parseInt(record.result_type, 10) !== 0 &&
            parseInt(record.result_type, 10) !== 1 &&
            parseInt(record.result_type, 10) !== 4 &&
            parseInt(record.result_type, 10) !== 7 &&
            (record.apply_status && parseInt(record.apply_status, 10) === 1)) &&
            <div className={styles['punch_to_apply']}>
              申请成功
          </div>
          }
          {isPreCard === true && preCard && preCard.cn_type === record.cn_type &&
            <PunchItem2
              type={type}
              reload={reload}
              setLoading={setLoading}
            />
          }
        </div>
      </div>
    )
  }
}

const PunchItemStyle = {
  flex: 1,
  display: 'flex',
}
const Label = ({ name, color }) => {
  return <div
    className={styles['punch_time_label']}
    style={{ borderColor: color, color: color }}
  >
    {name}
  </div>
}
const getTime = time => new Date(time * 1000).toUTCString().split(' ')[4]

const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};

const mapDispatchToProps = dispatch => {
  return {
    setInfo(Banci) {
      let params = {
        Banci: Banci,
      };
      dispatch(Actions.actionSelectBanci(params));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Punch);
// export default Punch;